<template>
    <div>
      <el-card style="">
        <div style="display: flex;justify-content: space-between;">
            <div style="font-size: 24px;font-weight: bold;">新闻动态管理</div>
            <div><el-button type="primary" @click="dialog_add = true">+ 添加</el-button></div>
        </div>
        <div style="margin-top: 30px;">
            <el-table :data="dataList" style="width: 100%">
              <el-table-column type="index" width="60" label="序号" align="center" />
              <el-table-column prop="userName" label="客户名称" align="center" />
              <el-table-column prop="address" label="客户头像" align="center">
                <template #default="scope">
                  <el-image style="width: 100px; height: 60px" :src="baseURL_dev+scope.row.userAvatarUrl" fit="contain"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="上传日期" align="center" />
              <el-table-column prop="address" label="发布者" align="center" />
              <el-table-column prop="evaluateLevel" label="星级" align="center">
                <template #default="scope">
                    <el-rate v-model="scope.row.evaluateLevel" disabled />
                    <!-- <el-rate
                      v-model="scope.row.evaluateLevel"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value} points"
                    /> -->
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="del(scope.row)">
                        <el-icon :size="16"><Delete /></el-icon>
                    </el-button>
                    <el-button link type="primary" size="small" @click="edit(scope.row)">
                        <el-icon :size="16"><Edit /></el-icon>
                    </el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px;display: flex;justify-content: space-between;">
              <div></div>
              <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="user.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="user.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
      </el-card>
  
      <el-dialog v-model="dialog_add" title="新增" width="800">
        <div>
          <div style="margin-left: 30px;display: flex;align-items: center">
            <div style="margin-right: 10px;font-size: 14px;width: 80px">
              评价标题
            </div>
            <el-input v-model="addForm.productName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="display: flex;align-items: center; ">
                <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                    客户姓名
                </div>
                <el-input v-model="addForm.userName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
            <div style="display: flex;align-items: center;margin-left: 30px; ">
                <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                    客户职位
                </div>
                <el-input v-model="addForm.userJob" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              评价星级
            </div>
            <el-rate v-model="addForm.evaluateLevel" />
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              客户头像
            </div>
            <div>
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL_dev+'/common/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img v-if="addForm.userAvatarUrl" :src="baseURL_dev+addForm.userAvatarUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
          </div>
          <div style="margin-left: 30px;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;margin-bottom: 10px;">
              评价详情：
            </div>
            <div style="border: 1px solid #ccc;flex: 1;">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="addorRef"
                mode="default"
              />
              <Editor
                style="height: 300px; overflow-y: hidden;"
                v-model="addForm.userEvaluate"
                :defaultConfig="addorConfig"
                mode="default"
                @onCreated="handleCreated1"
              />
            </div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialog_add = false">取消</el-button>
            <el-button type="primary" @click="addUser()">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
  
      <el-dialog v-model="dialog_edit" title="编辑" width="800">
        <div>
          <div style="margin-left: 30px;display: flex;align-items: center;">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              评价标题
            </div>
            <el-input v-model="editForm.productName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="display: flex;align-items: center; ">
                <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                    客户姓名
                </div>
                <el-input v-model="editForm.userName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
            <div style="display: flex;align-items: center;margin-left: 30px; ">
                <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                    客户职位
                </div>
                <el-input v-model="editForm.userJob" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              评价星级
            </div>
            <el-rate v-model="editForm.evaluateLevel" />
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              客户头像
            </div>
            <div>
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL_dev+'/common/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                >
                  <img v-if="editForm.userAvatarUrl" :src="baseURL_dev+editForm.userAvatarUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
          </div>
          <div style="margin-left: 30px;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;margin-bottom: 10px;">
              评价详情：
            </div>
            <div style="border: 1px solid #ccc;flex: 1;">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                mode="default"
              />
              <Editor
                style="height: 300px; overflow-y: hidden;"
                v-model="editForm.userEvaluate"
                :defaultConfig="addorConfig"
                mode="default"
                @onCreated="handleCreated2"
              />
            </div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialog_edit = false">取消</el-button>
            <el-button type="primary" @click="editUser()">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
    
    <script setup lang="ts">
      import '@wangeditor/editor/dist/css/style.css' // 引入 css
      import { baseURL_dev } from '../../config/baseUrl'
      import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
      import { ElMessage, ElMessageBox,ElNotification } from 'element-plus'
      import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
      import { Plus } from '@element-plus/icons-vue'
      import type { UploadProps } from 'element-plus'
      import { $EvaluateList,$EvaluateAdd,$EvaluateEdit,$EvaluateDel } from '../../api/content'
  
      onMounted(()=>{
        loadList()
      })
  
      let dataList = ref([])
      let form = ref({})
      form.caseName = ''
      form.pageNum = 1,
      form.pageSize = 10
  
      let dialog_add = ref(false)
      let dialog_edit = ref(false)
      let addForm = ref({})
      let editForm = ref({})
  
      let user = ref('')
      const currentPage4 = ref(1)
      const small = ref(false)
      const disabled = ref(false)
      const background = ref(false)
  
      const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
        form.value.pageSize = val
        loadList()
      }
      const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
        form.value.pageNum = val
        loadList()
      }
      
      const loadList = async ()=>{
        console.log(form.value)
        let ret = await $EvaluateList(form.value)
        console.log(ret)
        user.value = ret
        dataList.value = ret.rows
      }
  
      const addUser = async ()=>{
        let res = ref({})
        res = await $EvaluateAdd(addForm.value)
        console.log('res',res)
        if(res.code==0){
          loadList()
          dialog_add.value = false
        }
      }
  
      const del = async (row)=>{
        console.log(row)
        ElMessageBox.confirm(
          '您确定要删除这条数据吗？',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(async() => {
            let del = {}
            del.evaluateIds = row.evaluateId
            console.log('del',del)
            let res = ref({})
            res = await $EvaluateDel(del)
            console.log('res',res)
            if(res.code==0){
              // ElNotification({
              //     title:'通知',
              //     message: res.message,
              //     type:'success'
              // })
              loadList()
            }
          })
          .catch(() => {
          })
      }
  
      const editUser = async ()=>{
        let res = ref({})
        res = await $EvaluateEdit(editForm.value)
        console.log('res',res)
        if(res.code==0){
          loadList()
          dialog_edit.value = false
        }
      }
  
      const edit = async (row)=>{
        console.log(row)
        editForm.value = row
        dialog_edit.value = true
      }
  
      const handleAvatarSuccess: UploadProps['onSuccess'] = (
        response,
        uploadFile
      ) => {
        // console.log(baseURL_dev)
        console.log('response',response)
        console.log('uploadFile',uploadFile)
        addForm.value.userAvatarUrl = response.fileName
      }
  
      const handleAvatarSuccess2: UploadProps['onSuccess'] = (
        response,
        uploadFile
      ) => {
        editForm.value.userAvatarUrl = response.fileName
      }
  
      const addorRef = shallowRef()
      const addorConfig = { placeholder: '请输入内容...' }
      const handleCreated1 = (editor) => {
        addorRef.value = editor // 记录 editor 实例，重要！
      }
  
      const editorRef = shallowRef()
      const editorConfig = { placeholder: '请输入内容...' }
      const handleCreated2 = (editor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
      }
  
    </script>
    
    <style scoped lang="less">
    .avatar-uploader .avatar {
      width: 120px;
      height: 120px;
      display: block;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
  
    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }
  
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      text-align: center;
    }
  </style>